import React, { useCallback, useState } from "react";
import styles from "./style.module.scss";
import cn from "classnames";
import { FormattedMessage, useIntl } from "react-intl";
import { Button, App } from "antd";
import { InputBox, VerifyCode } from "./LoginInput";
import { UserOutlined, LockOutlined, VerifiedOutlined } from "@ant-design/icons";
import { Form, LibAppView as AppView } from "../../lib";
import { useSubmit, loginForm } from "./useLogin";
import { useLocation } from "react-router-dom";

export const MobileLoginForm = ({ publicKey, encrypt }: any) => {
    const intl = useIntl();
    const [ showLoading, setShowLoading ] = useState(false);
    const formRef = loginForm.useFormRef();
    const submitFunc = useSubmit(formRef, { publicKey, encrypt });
    const app = AppView.useApp();
    const location = useLocation();
    const { message } = App.useApp();
    const onSubmit = useCallback(() => {
        setShowLoading(true);
        setTimeout(() => {
            submitFunc().then(() => {
                setShowLoading(false);
                const fromUrl = location.state?.from;
                if(fromUrl) {
                    window.location.href = fromUrl;
                } else {
                    app.goHome();
                }
            }).catch((err) => {
                console.log(err.statusCode);
                setShowLoading(false);
                message.error(intl.formatMessage({ 
                    id: "admin.login.error.invalid." + err.statusCode,
                    defaultMessage: "invalid login"
                }));
            });
        }, 2000);
    }, [showLoading]);
    return (
        <section className={styles.mobileLoginForm}>
            <header>
                <FormattedMessage id="admin.login.title" defaultMessage="Login" />
            </header>
            <div>
            <section>
                <div className={cn(styles.mobileLoginFormInputArea,styles.clearFix)}>
                    <Form form={formRef} onSubmit={onSubmit}>
                        <section>
                            <InputBox
                                name="username"
                                label={<FormattedMessage id="admin.login.username" defaultMessage="User name" />}
                                icon={<UserOutlined />}
                                placeholder={intl.formatMessage({
                                    id: "admin.login.username.placeholder"
                                })}
                            />
                            <InputBox
                                name="password"
                                type="password"
                                label={<FormattedMessage id="admin.login.password" defaultMessage="Password" />}
                                icon={<LockOutlined />}
                                placeholder={intl.formatMessage({
                                    id: "admin.login.password.placeholder"
                                })}
                            />
                        
                            <InputBox
                                name="verifyCode"
                                label={<FormattedMessage id="admin.login.verify" defaultMessage="Verify code" />}
                                icon={<VerifiedOutlined />}
                                placeholder={intl.formatMessage({
                                    id: "admin.login.verify.placeholder"
                                })}
                            >
                                <VerifyCode />
                            </InputBox>
                        </section>
                        <Button htmlType="submit" type="primary" size={"large"}>
                            <FormattedMessage id="admin.login.button.submit" defaultMessage="Submit" />
                        </Button>
                    </Form>
                </div>
            </section>
            </div>
        </section>
    );
};